<template>
    <div>
        <div class="top">
            <div class="all">
                <img src="../../assets/images/￥.png" alt="">住院费用总计：<span>{{jzf.fye}}</span>
            </div>

            <div class="list" >
                <div class="item fl" v-for="(item,i) in tab0_1 " :key='i'>
                    <span>{{item.xm}}:</span>{{item.fye}}元
                </div>
            </div>

        </div>
        <div class="main">
            <div class="tab">
                <div class="item fl" v-for="(tab,index) in this.tab" :key="tab.key" @click="tabChange(index,tab.key,'tab')">
                    <span :class="curIndex == index?'cur':''">{{tab.text}}</span>
                </div>
            </div>
            <swiper ref="mySwiper" >
                <swiper-slide>
                    <!-- 手术材料/检验/检查费用 -->
                    <div class="tab-main">
                        <div class="tab-left fl">
                            <div
                                    class="item" :class="tab1Cur == item1.xm?'cur':''" v-for="(item1,index1) in tab1_1" :key="item1.xm" @click="tabChange(index1,item1.xm,'tab1')">
                                {{item1.xm}}
                            </div>
                        </div>
                        
                        <div class="tab-right fl" v-for="(item,index) in tab1_1" :key="item.xm" v-show="tab1Cur==item.xm">
                            <!-- 总计可以在这里显示，也可以拿到下面每个盒子里面显示，样式不影响，另一个tab切换同理 -->
                            <div class="title"><img src="../../assets/images/fy.png" alt=""  >
                                {{tab1Cur}}总计:
                                <span>{{item.fye}}元</span>
                            </div>
                            
                            <div v-show="tab1Cur==item.xm">
                                <!-- <div class="title"><img src="../../assets/images/fy.png" alt="">{{tab1Cur}}总计:<span>2657.88元</span></div> -->
                                <div class="content" >
                                    <table>
                                        <tr>
                                            <td>项目名称</td>
                                            <td>单价（元）</td>
                                            <td>数量（次）</td>
                                            <td>金额（元）</td>
                                        </tr>
                                        <tr v-for="(item2,index2) in item.child" :key="index2">
                                            <td>{{item2.xm}}</td>
                                            <td>{{item2.dj}}</td>
                                            <td>{{item2.sl}}</td>
                                            <td>{{item2.fye}}</td>
                                        </tr>

                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <!-- 药品/输血/输氧费用 -->
                    <div class="tab-main">
                        <div class="tab-left fl">
                            <div class="item" :class="tab2Cur == item1.xm?'cur':''" v-for="(item1,index1) in tab2_1" :key="item1.xm" @click="tabChange(index1,item1.xm,'tab2')">
                                {{item1.xm}}
                            </div>
                        </div>
                        <div class="tab-right tabHeight fl" v-for="(item,index) in tab2_1" :key="item.xm" v-show="tab2Cur==item.xm">
                            <div class="title"><img src="../../assets/images/fy.png" alt="">{{tab2Cur}}总计:<span>{{item.fye}}元</span></div>
                            <div v-show="tab2Cur==item.xm">
                                <div class="content">
                                    <table>
                                        <tr>
                                            <td>药品名称</td>
                                            <td>单价（元）</td>
                                            <td>数量</td>
                                            <td>金额（元）</td>
                                        </tr>
                                        <tr v-for="(item2,index2) in item.child" :key="index2">
                                            <td>{{item2.xm}}</td>
                                            <td>{{item2.dj}}</td>
                                            <td>{{item2.sl}}</td>
                                            <td>{{item2.fye}}</td>
                                        </tr>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getZYHISFeeDetailJSApi} from '@/api/healthRecords'
import { TabContainer, TabContainerItem } from 'mint-ui';
import tips from '@/components/tips.vue'
export default {
    name: 'settlement',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            active: 'tab1',
            tab: [
                {
                    text: '手术材料/检验/检查费用',
                    key: 'tab1'
                },
                {
                    text: '药品/输血/输氧费用',
                    key: 'tab2'
                }
            ],
            tab2:['输血费','输氧费','西药费','中成药','中草药'],
            tab1:['手术材料费','检查费','化验费','摄片费','透视费'],
            tab0:['诊疗费','治疗费','护理费','其他费用'],
            tab1_1: [],
            tab2_1: [],
            tab0_1: [],
            jzf:{
                "fxm":"就诊费用共计", //"父项目
                "xm":"-",        //"项目
                "fye":"",             //"费用
                "cc":"1",             //层次
                "child":[]
            },
            curIndex: 0,
            tab1Cur: '化验费',
            tab2Cur: '输血费',
            hosName: '',//医院名称
            ZYHISFeeDetailJSParam: {"yljgdm": "42501272800", "jzlsh": "01413661"},
            ZYHISFeeDetailJSResult: [],
            tab1CurIndex:0,
            tab2CurIndex:0,
            hosName:'',//医院名称，
            tab1Option:{
                direction:'vertical',
                autoHeight:true,
                observer:true,
                observeParents:true,

                on:{
                    init:function(){},
                }
            },
            tab2Option:{
                direction:'vertical',
                autoHeight:true,
                observer:true,
                observeParents:true,
                on:{
                    init:function(){},
                }
            },
        }
    },
    methods: {
        tabChange(index, key, type) {
            if(type == 'tab') {
                this.curIndex = index
                this.swiper.slideTo(index,1000,false)
                this.active = key
            } else if(type == "tab1"){
                this.tab1Cur = key
                // this.swiper1.slideTo(index,1000,false)
            } else if(type == "tab2"){
                this.tab2Cur = key
                // this.swiper2.slideTo(index,1000,false)
            }

        },
        //1.13住院结算信息
        getZYHISFeeDetailJS() {
            getZYHISFeeDetailJSApi(JSON.stringify(this.ZYHISFeeDetailJSParam)).then(response => {
                var yiji = [];
                var erji = [];
                var jzf = [];
                var tab1_1 = [];
                var tab2_1 = [];
                var tab0_1 = [];
                if (response.data.code == 1) {
                    this.ZYHISFeeDetailJSResult = response.data.data;
                    response.data.data.forEach(item => {
                        item.child = [];
                        if (item.cc == '1') {
                            yiji.push(item)
                        } else if (item.cc == '2') {
                            erji.push(item)
                        }
                    });
                    erji.forEach(item1 => {
                        yiji.forEach(item2 => {
                            if (item1.fxm == item2.xm) {
                                item2.child.push(item1)
                            }
                        })
                    });
                    yiji.forEach(item3 => {
                        if (this.tab2.indexOf(item3.xm)> -1) {
                            tab2_1.push(item3)
                        }else if (this.tab1.indexOf(item3.xm) > -1) {
                            tab1_1.push(item3)
                        } else if (this.tab0.indexOf(item3.xm) > -1) {
                            tab0_1.push(item3)
                        }
                    });
                    this.tab1_1 = tab1_1
                    this.tab2_1 = tab2_1
                    this.tab0_1 = tab0_1
                    this.jzf.fxm = response.data.data[0].fxm;
                    this.jzf.xm = response.data.data[0].xm;
                    this.jzf.fye = response.data.data[0].fye;
                    this.jzf.cc = response.data.data[0].cc;
                    this.jzf.child = yiji
                }
            })
        }
    },
    components: {
        tips
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        },
        // swiper1(){
        //     return this.$refs.swiper1.swiper
        // },
        // swiper2(){
        //     return this.$refs.swiper2.swiper
        // }
    },
    mounted() {
        this.getZYHISFeeDetailJS()
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        this.swiper.slideTo(this.curIndex, 1000, false)
        // this.swiper1.slideTo(this.tab1Cur, 1000, false)
        // this.swiper2.slideTo(this.tab2Cur, 1000, false)
        // //  swiper的滑动监听事件，获得当前index
        this.swiper.on('slideChange',()=>{
            this.curIndex = this.swiper.activeIndex
        })
        // this.swiper1.on('slideChange',()=>{
        //     this.tab1CurIndex = this.swiper1.activeIndex
        // })
        // this.swiper2.on('slideChange',()=>{
        //     this.tab2CurIndex = this.swiper2.activeIndex
        // })
        // this.$nextTick(()=>{
        //     this.swiper1.direction ='vertical'
        // })
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float:left;
}
.fr{
    float:right;
}
.top{
    background: #fff;
    .all{
        font-size: 1rem;
        padding:1rem;
        border-bottom:#DCDCDC solid 1px;
        color:#969696;
        img{
            width: 1rem;
            vertical-align: middle;
            margin-right: 0.5rem;
        }
        span{
            color: #333333;
        }
    }
    .list{
        padding:1rem;
        color:#333333;
        font-size: 1rem;
        overflow: hidden;
        .item{
            width: 50%;
            line-height: 1.5rem;
            span{
                width: 3rem;
                color:#969696;
                text-align: justify;
            }
        }

    }
}
.main{
    margin-top:0.6rem;
    background:#fff;
    .tab{
        padding: 1rem 1.6rem 0 1.6rem;
        background: #fff;
        border-bottom:#F4F3F3 solid 1px;
        overflow: hidden;
        .item{
            width: 50%;
            text-align:center;
            span{
                display: inline-block;
                color:#666666;
                font-size: 1rem;
                font-weight: bold;
                padding-bottom:0.6rem;
                border-bottom:#fff solid 2px;
            }
            span.cur{
                color:#009CDF;
                border-bottom:#009CDF solid 2px;
            }
        }

    }
    .tab-main{
        overflow: hidden;
        .tab-left{
            width: 10%;
            .item{
                background: #F4F6FB;
                font-size: 1rem;
                color:#969696;
                border:#DBDCDE solid 1px;
                padding: 0.7rem;
                line-height: 1.5rem;

            }
            .item.cur{
                background: #fff;
                color:#333333;
                border:#fff solid 1px;
            }
        }
        .tab-right{
            width:90%;
            padding: 1rem 0.3rem;
            height: 25rem;
            overflow-y: scroll;
            .title{
                font-size: 1rem;
                color:#969696;
                img{
                    width: 1.3rem;
                    vertical-align: middle;
                    margin-right: 0.5rem;
                }
                span{
                    color:#000;
                    margin-left:0.5rem;
                }
            }
            .content{
                margin-top:1rem;
                table{
                    width: 100%;
                    text-align: center;
                    tr{
                        color:#999999;
                        font-size: 1rem;
                        border-bottom:#DDDDDD solid 1px;
                        td{
                            padding:0.5rem 0;
                        }
                        td:nth-child(1){
                            width:30%;
                        }
                    }
                    tr:nth-child(1){
                        background: #E7F7FC;
                        color:#009CDF;
                        font-size: 1rem;
                        line-height: 1.6rem;
                        td{
                            padding: 0.2rem 0;
                        }
                    }
                }
            }
        }
        .tabHeight{
            height: 29rem;
        }
    }
}
</style>
